<template>
    <div class="page-bg an-order-list">
        <van-nav-bar
            title="我的订单"
            left-text=""
            right-text=""
            left-arrow
            @click-left="clickBack"
            />

            <van-tabs v-model:active="tab" sticky @click="tabChange">
                <van-tab v-for="(tab,index) in tabList" :title="tab.title" :key="index" :name="tab.name">
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >
                        <div class="an-pad">
                            <div class="an-box" v-for="item in list" :key="item.id" @click="toOrderInfo(item.id)">
                                <div class="an-box-head" >
                                    <div> {{item.createTime}}</div>
                                    <div class="an-tag" :class="item.state>0?'orange-dark':'gray-5'">{{stateName(item.state)}}</div>
                                </div>
                                <van-card
                                v-for="goods in item.orderDetails"
                                :key="goods.id"
                                :num="goods.goodsNum"
                                :price="goods.money"
                                :title="goods.goods.name"
                                :desc="goods.goodsStandard"
                                :thumb="goods.goods.image"
                                @click-thumb.stop="toGoodsInfo(goods.goodsID)"
                                />
                                <div class="an-money">
                                    <span class="gray-5 an-all-price" v-if="allPrice(item) != item.totalMoney">总价：￥{{allPrice(item)}} </span>
                                    <span> 实付款<span class="orange">￥<strong class="number">{{item.totalMoney}} </strong></span> </span>
                                </div>
                                <div class="an-box-footer">
                                    <van-button round plain size="small" type="default" v-if="item.state<0" @click.stop="clickDelete(item)">删除订单</van-button>
                                    <van-button round plain size="small" type="default" v-if="item.state==1120" @click.stop="clickAppraise(item)">评价</van-button>
                                    <van-button round plain size="small" type="default" v-if="item.state==1000" @click.stop="closeOrder(item)">取消交易</van-button>
                                    <van-button round plain size="small" type="warning" v-if="item.state==1000" @click.stop="clickPlay(item)">立即付款</van-button>
                                    <van-button round plain size="small" type="warning" v-if="item.state==1110 || item.state==1100" @click.stop="clickOk(item)">确认收货</van-button>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-tab>
            </van-tabs>
    </div>
</template>

<script>
export default {
  props:{
    tab:{
      type: String,
      default:'' // ''全部  1000待付款  1100待发货  1110待确认  1120待评价
    }
  },
  data() {
    return{
      tabList:[{
        name:'',
        title:'全部'
      },{
        name:'1000',
        title:'待付款'
      },{
        name:'1100',
        title:'待发货'
      },{
        name:'1110',
        title:'待确认'
      },{
        name:'1120',
        title:'待评价'
      }],
      list: [],
      loading: false,
      finished: false,
      getData:{
        page:1,
        pageSize: 10,
        state:'',
        userID: ''
      },
      total:0
    };
  },
  mounted() {
    this.getList(1);
  },
  methods:{

    // 页签切换
    tabChange() {
      this.getList(1);
    },

    // 查询列表
    getList(page) {
      if(page) {
        this.getData.page = page;
      }
      if(page==1) {
        this.list = [];
      }
      this.getData.state = this.tab;
      this.getData.userID = this.$store.state.userInfo.id;
      this.loading = true;
      this.$api.orderList(this.getData).then(res => {
        this.loading = false;
        this.list = [...this.list, ...res.records];
        this.total = res.total;
        // 判断是否存在下一页数据
        if(this.total <= this.getData.page * this.getData.pageSize) {
          this.finished = true;
        }
      });
    },

    // 上拉加载
    onLoad() {
      let page = this.getData.page;
      page++;
      if(this.total > this.getData.page * this.getData.pageSize) {
        this.getList(page);
      }
    },

    // 订单状态 转文字
    stateName(state) {
      if(state<0) {
        return '交易取消';
      }
      return this.$api.orderState[state];
    },

    // 计算订单总价
    allPrice(item) {
      let nd = 0;
      item.orderDetails.forEach(element => {
        nd = nd + element.goodsNum * element.money * 100;
      });
      return nd/100 + item.freight;
    },

    // 立即付款
    clickPlay(item) {
      let data = {
        orderID: item.id,
        total: item.totalMoney
      };
      let nd = encodeURI(JSON.stringify(data));
      this.$router.push({path:'/play', query:{prom: nd}});
    },

    // 关闭订单
    closeOrder(item) {
      let nd ={
        id: item.id,
        state: -1000
      };
      this.$api.orderUpdate(nd).then(() => {
        this.$toast('交易已取消');
        this.getList(1);
      });
    },

    // 确认收货
    clickOk(item) {
      let nd ={
        id: item.id,
        state: 1120
      };
      this.$api.orderUpdate(nd).then(() => {
        this.$toast('确认成功！');
        this.getList(1);
      });
    },

    // 删除订单
    clickDelete(item) {
      let nd ={
        id: item.id,
        isDelete: 1
      };
      this.$api.orderUpdate(nd).then(() => {
        this.$toast('删除成功');
        this.getList(1);
      });
    },

    // 评价
    clickAppraise() {
      this.$toast('暂未开通评价功能');
    },

    // 跳转至商品详情页
    toGoodsInfo(goodsID) {
      this.$router.push({ path: '/goods', query: { id: goodsID }});
    },

    // 跳转订单详情
    toOrderInfo(orderID) {
      this.$router.push({ path: '/orderInfo', query: { id: orderID }});
    },

    clickBack() {
      this.$router.push({ path: '/user'});
    }
  }
};
</script>

<style lang="scss">
.an-box-footer{
    .van-button{
        margin-left: 10px;
    }
}
</style>
<style lang="scss" scoped>
.an-order-list{
    .an-pad{
        padding: 10px;
        .an-box{
            margin-bottom: 10px;
            background-color: #ffffff;
            .an-box-head{
                display: flex;
                justify-content: space-between;
            }
            .an-money{
                text-align: right;
                padding: 10px 0;
                .an-all-price{
                  text-decoration:line-through;
                }
                .number{
                  font-size: 18px;
                }
            }
            .an-box-footer{
                text-align: right;
            }
        }
    }
}

</style>